<template>
  <!-- separator分隔符 props自定义属性 options数据源 -->
  <el-cascader :value="value" size="mini" :options="depts" :props="props" separator="-" @change="handleChange" />
</template>

<script>
import { getDepData } from '@/api/department'
import { transListToTree } from '@/utils'
export default {
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      depts: [],
      props: {
        label: 'name', // 展示的文本
        value: 'id' // 提交/保存的内容
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await getDepData()
      // console.log(res)
      this.depts = transListToTree(res, 0)
      // console.log(this.depts)
    },
    // 级联组件切换改变部门
    handleChange(list) {
      if (list.length) {
        this.$emit('input', list[list.length - 1])
      } else {
        this.$emit('input', null)
      }
    }
  }
}

</script>
